<template>
  <view class="">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <tn-navbar>操作员管理</tn-navbar>
        <tn-input v-model="inputValue" placeholder="请输入操作员账号">
          <template #suffix>
            <view class="tn-ml tn-mr" @click="filterData">
              <tn-icon name="search" color=" tn-gray_bg"></tn-icon>
            </view>
          </template>
        </tn-input>
      </template>
      <view class="tn-p tn-gradient-bg__indigo-light">
        <view
          v-for="(item, index) in dataList"
          :key="index"
          class="tn-shadow-md tn-p tn-mb tn-radius tn-black_text tn-white_bg">
          <view class="tn-flex justify-between justify-start tn-mb-sm">
            <view>
              <tn-button type="primary" shape="circle">
                {{ item.name[0] }}
              </tn-button>
              <text class="tn-text-xl tn-text-bold tn-ml-sm">
                {{ item.name }}
              </text>
            </view>
          </view>
          <view class="Password-details tn-mt tn-pt tn-pl-0 tn-pr-0">
            <view class="tn-flex justify-between tn-mb-sm">
              <text>登录账号</text>
              <text>{{ item.acctNo }}</text>
            </view>
            <view class="tn-flex justify-between tn-mb-sm">
              <text>操作员：</text>
              <text>{{ item.name }}</text>
            </view>
            <view class="tn-flex justify-between tn-mb-sm">
              <text>联系电话：</text>
              <text>{{ item.phone }}</text>
            </view>
          </view>
          <view class="tn-flex tn-flex-wrap tn-mt-sm">
            <view class="tn-flex justify-around">
              <view class="tn-m-xs">
                <tn-button
                  :shadow="true"
                  shadow-color="tn-grey"
                  bg-color="tn-white"
                  @click="openPopupPassword">
                  <tn-icon
                    name="payment-wechat"
                    size="30"
                    color="tn-teal-dark"></tn-icon>
                  密码
                </tn-button>
              </view>

              <view class="tn-m-xs">
                <tn-button
                  :shadow="true"
                  shadow-color="tn-grey"
                  bg-color="tn-white"
                  @click="openEditPopup(item)">
                  <tn-icon name="edit-write-fill" size="30"></tn-icon>
                  编辑
                </tn-button>
              </view>
              <view class="tn-m-xs">
                <tn-button
                  :shadow="true"
                  shadow-color="tn-grey"
                  bg-color="tn-white"
                  @click="deleteOprUserModal(item.id)">
                  <tn-icon name="delete" size="30" color="tn-red"></tn-icon>
                  删除
                </tn-button>
              </view>
            </view>
          </view>
        </view>
      </view>

      <template #loadingMoreNoMore></template>
    </z-paging>
  </view>
  <view>
    <!-- 悬浮按钮 -->
    <tn-suspend-button
      icon="add"
      size="sm"
      text-color="tn-white"
      bg-color="tn-gradient-bg__cool-5"
      @click="openAddPopup" />
    <!-- 编辑弹框 -->
    <tn-popup
      v-model="isPopupEdit"
      width="90%"
      open-direction="center"
      @close="closeEditPopup"
      close-btn
      :overlay-closeable="false">
      <view class="tn-m-sm tn-p-sm">
        <view class="tn-mb-xl">
          <tn-title
            size="lg"
            title="操作员"
            mode="hLine"
            sub-title="Edit"
            assist-color="tn-blue" />
        </view>
        <tn-form ref="formRef" :model="formData" label-position="top">
          <tn-form-item label="操作员名称">
            <tn-input v-model="formData.name"></tn-input>
          </tn-form-item>
          <tn-form-item label="手机号">
            <tn-input v-model="formData.phone"></tn-input>
          </tn-form-item>
          <tn-form-item label="备注">
            <tn-input v-model="formData.remark"></tn-input>
          </tn-form-item>
          <view class="tn-flex justify-between">
            <tn-button
              :shadow="true"
              shadow-color="tn-grey"
              @click="confirmEdit"
              size="lg"
              width="100%"
              bg-color="tn-blue">
              确认
            </tn-button>
          </view>
        </tn-form>
      </view>
    </tn-popup>

    <!-- 密码弹框 -->
    <tn-popup
      v-model="isPopupPassword"
      width="90%"
      open-direction="top"
      @close="closePopupPassword"
      close-btn
      :overlay-closeable="false">
      <view class="tn-m-sm tn-p-sm">
        <view class="tn-mb-xl">
          <tn-title
            size="lg"
            title="密码操作"
            mode="hLine"
            sub-title="Password"
            assist-color="tn-blue" />
        </view>
        <tn-form ref="formDataRef1" :model="formData1" label-position="top">
          <tn-form-item label="密码">
            <tn-input v-model="formData1.passwd"></tn-input>
          </tn-form-item>

          <tn-form-item label="确认密码">
            <tn-input v-model="formData1.confirmPasswd"></tn-input>
          </tn-form-item>
          <view class="tn-flex justify-between">
            <tn-button
              :shadow="true"
              shadow-color="tn-grey"
              @click="confirmPassword"
              size="lg"
              width="100%"
              bg-color="tn-blue">
              确认
            </tn-button>
          </view>
        </tn-form>
      </view>
    </tn-popup>
    <!-- 删除弹框 -->
    <tn-modal ref="modalRef" />
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import TnSuspendButton from "tnuiv3p-tn-suspend-button/index.vue";
import { onLoad } from "@dcloudio/uni-app";
import cfsheep from "@/cfsheep";
import type { TnModalInstance } from "@/uni_modules/tuniaoui-vue3";
// 操作员操作-密码表单
const formData1 = ref({
  id: null,
  passwd: null,
  confirmPasswd: null,
}); 
// ===============模拟数据 =========================

// 模拟数据
const tempList = ref([]);

// z-paging 示例
const paging = ref(null);
// 数据列表
const dataList = ref();

const queryList = (pageNo, pageSize) => {
  // 模拟数据

  for (let i = 0; i < 10; i++) {
    tempList.value.push({
      id: i,
      parkingLotName: "停车场" + i,
      acctNo: "S001" + i,
      name: "哈哈哈" + i,
      phone: "1804805751" + i,
    });
  }
  paging.value.complete(tempList.value);
};

// 操作员操作-密码弹框
const isPopupPassword = ref(false);
// 操作员操作-编辑显示密码弹框
const openPopupPassword = (data: any) => {
  // TODO  data 赋值
  // formData1.value = data;
  isPopupPassword.value = true;
};
// 操作员操作-关闭密码弹框
const closePopupPassword = () => {
  isPopupPassword.value = false;
};

// 操作员操作-提交密码
const confirmPassword = () => {
  console.log(formData1.value);
  // 确认修改逻辑
  closePopupPassword();
};
// ===========================================
// 操作员操作-操作员弹框
const isPopupEdit = ref(false);
// 操作员操作-操作员表单
const formData = ref({
  id: "",
  name: "",
  phone: "",
  remark: "",
});
// 操作员操作-新增显示弹框
const openAddPopup = () => {
  isPopupEdit.value = true;
};
// 操作员操作-编辑显示弹框
const openEditPopup = (data: any) => {
  console.log("openEditPopup=>", data);
  // TODO  data 赋值
  formData.value = data;
  isPopupEdit.value = true;
};
// 操作员操作-关闭弹框
const closeEditPopup = () => {
  isPopupEdit.value = false;
};

// 操作员操作-提交操作员
const confirmEdit = () => {
  console.log(formData.value);
  // 确认修改逻辑
  closeEditPopup();
};

// 操作员操作-操作员删除ref
const modalRef = ref<TnModalInstance>();

// 操作员操作-操作员删除弹框确认
const deleteOprUserModal = (id: String) => {
  modalRef.value?.showModal({
    title: "提示",
    content: "是否删除操作员",
    confirmText: "确定",
    cancelText: "取消",
    showCancel: true,
    cancel: () => {
      return true;
    },
    confirm: () => {
      deleteOprUser(id);
    },
  });
};
// 操作员操作-操作员删除
const deleteOprUser = (id: String) => {
  // 删除记录逻辑

  paging.value.reload(true);
};
const findBtn = () => {
  paging.value.reload(true);
};

onLoad(() => {});
</script>
<style lang="scss" scoped>
.Password-details {
  border-top: 1px dashed rgba(12, 12, 12, 0.5);
  border-bottom: 1px dashed rgba(10, 10, 10, 0.5);
}

.Password-footer {
  font-size: 14px;
  text-align: center;
  opacity: 0.8;
}

.Password-list {
  background-color: #ffffff;
  width: 100%;
}

.Password-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.Password-item:last-child {
  border-bottom: none;
}

.Password-info {
  flex-grow: 1;
}

.Password-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.Password-details {
  font-size: 14px;
  color: #666;
}
</style>
